<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="p" uri="/WEB-INF/tld/paging.tld"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<title>贴子</title>
<meta name="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="${path }/static/bootstrap.min.css" />
<script src="${path }/static/jquery.min.js"></script>
<script src="${path }/static/js/bootstrap.min.js"></script>
<style type="text/css">
/* .page_btn {
	
	padding-right: 200px;
} */
.page_btn {
	margin-bottom: 50px;
	margin-left: 540px;
}

.page_btn a {
	cursor: pointer;
	padding: 5px;
	font-size: 12px;
}

.page_box {
	float: right;
}

.num {
	padding: 0 10px;
}
</style>
</head>

<body>
	<jsp:include page="/head"></jsp:include>
	<div class="panel panel-info"
		style="width: 1000px; margin-left: 200px; margin-top: 52px;">
		<div class="panel-heading" style="height: 50px">
			<h2 class="panel-title " style="margin-top: 10px" id="title">${post.postTitle }</h2>
		</div>

		<div class="panel-body">
			<table class="table table-responsive">
				<thead>
					<tr>
						<th width="200x"></th>
						<th width="600px"></th>
					</tr>
				</thead>
				<%
					String path = request.getContextPath();
					String basePath = request.getScheme() + "://"
							+ request.getServerName() + ":" + request.getServerPort()
							+ path + "/";
					String bh = request.getScheme() + "://" + request.getServerName()
							+ ":" + request.getServerPort();
				%>
				<tbody>
					<tr>
						<td>
							<div style="width: 100px height:140px">
								<c:if test="${not empty post.img }">
									<img src="${post.img }" width="100" height="100">
								</c:if>
								<c:if test="${ empty post.img }">
									<img src="${path }/static/images/weishch.png" width="100"
										height="100">
								</c:if>

							</div>
							<h4 id="nickname" style="margin-left: 20px">${post.postUsername }</h4>
							<h4>
								<span style="color: red; margin-left: 20px">楼主</span>
							</h4>
						</td>
						<td id="content">
							<h5 style="margin-left: 20px">${post.postContent }</h5>
							<div class="accordion-heading"
								style="margin-left: 500px; margin-top: 80px">
								<span>发表于<fmt:formatDate value="${post.postCreatetime }"
										pattern='yyyy-MM-dd HH:mm' /></span>
							</div>
						</td>
					</tr>

					<c:forEach items="${replies }" var="reply" varStatus="status">
						<tr>
							<td>
								<div style="width: 100px height:140px">
									<c:choose>
										<c:when test="${post.userid==reply.userid }">
											<c:if test="${not empty reply.img }">
												<img src="${reply.img }" width="100" height="100">

											</c:if>
											<c:if test="${ empty reply.img }">
												<img src="${path }/static/images/weishch.png" width="100"
													height="100">
											</c:if>
											<h4 id="username" style="margin-left: 20px">${reply.replyUsername }</h4>
											<h4>
												<span style="color: red; margin-left: 20px">楼主</span>
											</h4>
										</c:when>

										<c:otherwise>

											<c:if test="${not empty reply.img }">
												<img src="${reply.img }" width="100" height="100">
											</c:if>
											<c:if test="${ empty reply.img }">
												<img src="${path }/static/images/weishch.png" width="100"
													height="100">
											</c:if>
											<h4 id="username" style="margin-left: 20px">${reply.replyUsername }</h4>
										</c:otherwise>
									</c:choose>
								</div>

							</td>
							<td id="content">
								<h5 id="username" style="margin-left: 20px">${reply.replyContent }</h5>
								<div class="accordion-heading"
									style="margin-left: 400px; margin-top: 80px">
									<span>${status.index+1+param.pageIndex}楼
										&nbsp;&nbsp;&nbsp;发表于<fmt:formatDate
											value="${reply.replyCreatetime }" pattern='yyyy-MM-dd HH:mm' />&nbsp;&nbsp;<a
										href="javascript:void(0)"
										onclick="huifu('${reply.replyid}','${post.postid }')">回复</a>
									</span><span><c:if test="${empty reply.countRes }">
									(0)
									</c:if> <c:if test="${not empty reply.countRes }">
									(${reply.countRes})
									</c:if></span>
								</div>
								<div style="margin-left: 20px; margin-top: 10px">

									<c:forEach items="${reply.reslist }" var="reslist">
										<table >
											<tbody>
												<tr>
													<td style="color: #428bca;width: 50px">${reslist.replyUsername }:</td>
													<td>${reslist.replyContent }</td>
												</tr>
												 <tr><td   style="margin-left: 200px"></td>
												     <td ><span style="margin-left: 400px">回复于${reslist.replyCreatetime }</span></td>
												</tr>
											</tbody>
										</table>
										<%-- <span style="margin-left: 200px">回复于${reslist.replyCreatetime }</span> --%>
										<%-- <div>
											<span style="color: #428bca">${reslist.replyUsername }:</span> <span
												class="form-control-static">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;${reslist.replyContent }</span>
												<span
												style="margin-left: 400px">回复于${reslist.replyCreatetime }</span>
										</div> --%>
									</c:forEach>
								</div>
							</td>
						</tr>
					</c:forEach>
				</tbody>

			</table>
		</div>
	</div>	
	<div class="page_btn clear">	
		<p:paging currPage="${page.pageIndex}"
			url="${path }/reply/replies/${post.postid }"
			totalRecords="${page.totalField }" isAppoint="false" />
	</div>
	<div class="col-sm-6">		
		<label class="col-sm-2 control-label"
			style="margin-top: 10px; margin-left: 160px;">回复</label>
		<form role="form" name="replyform">
			<div class="form-group" style="margin-top: 30px">
				<div class="col-sm-4" id="content_td">
					
					<div id="myeditor"></div>
				</div>
				<%-- <input type="hidden" value="${user.userid }" name="userid" />
						<input type="hidden" value="${user.nickname }" name="nickname" /> --%>
				<input type="hidden" value="${post.postid }" name="postid" />
				<!-- <input type="hidden" value="0" name="userid" />
						<input type="hidden" value="0" name="nickname" />
						<input type="hidden" value="0" name="postid" /> -->


				<span id="post_content_info"></span>
			</div>
		</form>
		<button class="btn  btn-primary "
			style="margin-left: 400px; margin-top: 20px" onclick="submitData()">确认</button>

	</div>
	<!--   弹出框插件 -->
	<script type="text/javascript" charset="utf-8"
		src="${path }/static/js/teninedialog.js"></script>
	<!-- 默认配置文件 -->
	<script type="text/javascript" charset="utf-8"
		src="${path}/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="${path}/ueditor/ueditor.all.min.js">
		
	</script>
	<!-- 语言文件 -->
	<script type="text/javascript" charset="utf-8"
		src="${path}/ueditor/lang/zh-cn/zh-cn.js"></script>
	<!-- 引入layer插件 -->
	<script type="text/javascript" charset="utf-8"
	src="${path}/static/layer/layer.js"></script>
	<!-- 如果需要页面渲染的话引入 -->
	<%-- <script type="text/javascript" charset="utf-8"
		src="${path}/static/js/ueditor/ueditor.parse.min.js"></script> --%>

	<script type="text/javascript">		
		var articleEditor = UE.getEditor('myeditor', {
			initialFrameWidth : 920,
			initialFrameHeight : 400,

			toolbars : [ [ 'anchor', //锚点
			'undo', //撤销
			'redo', //重做
			'bold', //加粗
			'indent', //首行缩进
			'snapscreen', //截图
			'italic', //斜体
			'underline', //下划线
			'strikethrough', //删除线
			'subscript', //下标
			'fontborder', //字符边框
			'superscript', //上标
			'formatmatch', //格式刷
			'source', //源代码
			'blockquote', //引用
			'pasteplain', //纯文本粘贴模式
			'selectall', //全选
			'print', //打印
			'preview', //预览
			'horizontal', //分隔线
			'removeformat', //清除格式
			'time', //时间
			'date', //日期
			'unlink', //取消链接
			'insertrow', //前插入行
			'insertcol', //前插入列
			'mergeright', //右合并单元格
			'mergedown', //下合并单元格
			'deleterow', //删除行
			'deletecol', //删除列
			'splittorows', //拆分成行
			'splittocols', //拆分成列
			'splittocells', //完全拆分单元格
			'deletecaption', //删除表格标题
			'inserttitle', //插入标题
			'mergecells', //合并多个单元格
			'deletetable', //删除表格
			'cleardoc', //清空文档
			'insertparagraphbeforetable', //"表格前插入行"
			'insertcode', //代码语言
			'fontfamily', //字体
			'fontsize', //字号
			'paragraph', //段落格式
			'simpleupload', //单图上传
			'insertimage', //多图上传
			'edittable', //表格属性
			'edittd', //单元格属性
			'link', //超链接
			'emotion', //表情
			'spechars', //特殊字符
			'searchreplace', //查询替换
			'map', //Baidu地图
			'gmap', //Google地图
			'insertvideo', //视频	           
			'justifyleft', //居左对齐
			'justifyright', //居右对齐
			'justifycenter', //居中对齐
			'justifyjustify', //两端对齐
			'forecolor', //字体颜色
			'backcolor', //背景色
			'insertorderedlist', //有序列表
			'insertunorderedlist', //无序列表
			'fullscreen', //全屏
			'directionalityltr', //从左向右输入
			'directionalityrtl', //从右向左输入
			'rowspacingtop', //段前距
			'rowspacingbottom', //段后距
			'pagebreak', //分页
			'insertframe', //插入Iframe
			'imagenone', //默认
			'imageleft', //左浮动
			'imageright', //右浮动
			'attachment', //附件
			'imagecenter', //居中
			'wordimage', //图片转存
			'lineheight', //行间距
			'edittip ', //编辑提示
			'customstyle', //自定义标题
			'autotypeset', //自动排版
			'touppercase', //字母大写
			'tolowercase', //字母小写
			'background', //背景
			'template', //模板	  	           
			'inserttable', //插入表格
			'drafts', // 从草稿箱加载
			'charts' // 图表 
			] ]
		});		
		function submitData() {
			var str = articleEditor.getContent();			
			if (str == '') {
				$.teninedialog({

					title : '系统提示',

					content : '请输入回帖内容！'
				});
				return;
			} else {
				var postid = $("input[name=postid]").val();
				$
						.ajax({
							url : "${path}/reply/newreply",
							cache : false,
							type : "post",
							dataType : 'json',
							data : {
								postid : postid,
								replyContent : str
							},
							success : function(obj) {
								if (obj == 'ok') {
									var pagend = $("#paging_total").attr(
											"value");
									var pagcunnt = $(
											"span[name=paging_current]").text();

									$
											.teninedialog({
												title : '系统提示',
												content : '回帖成功',
												showCloseButton : false,//不显示关闭按钮

												otherButtons : [ "确定", "取消" ],//其他按钮文本，样式默认,["确定","取消"]

												otherButtonStyles : [
														'btn-primary',
														'btn-primary' ],//其他按钮的样式，['btn-primary','btn-primary'],bootstrap按钮样式
												dialogHidden : function() {
													if (!pagcunnt) {
														window.location.href = "${path}/reply/replies/${post.postid}";
													} else {
														window.location.href = "${path}/reply/replies/${post.postid}?pageIndex="
																+ (pagcunnt - 1)
																* 10
																+ "&pageSize=10";
													}
												},

												clickButton : function(sender,
														modal, index) {
													if (index == '0') {
														if (!pagend) {
															window.location.href = "${path}/reply/replies/${post.postid}";
														} else {
															window.location.href = "${path}/reply/replies/${post.postid}?pageIndex="
																	+ (pagend - 1)
																	* 10
																	+ "&pageSize=10";
														}
													} else {
														$(this).closeDialog(
																modal);
													}

												}
											});
								}
								if (obj == 'login') {
									if (confirm("请登录!")) {
										window.location.href = "${path}/login";
									}
									;
								}
								if (obj == 'no') {
									$.teninedialog({

										title : '系统提示',

										content : '回帖失败！'
									});
								}

							},
						});
			}

		}

		function huifu(reid, poid) {
			
			;!function(){
             var ut=null;
				//加载扩展模块
				layer.config({
				    extend: 'extend/layer.ext.js'
				});
					layer.ready(function(){ 
					layer.msg('加载中', {icon: 16}); 
					//官网欢迎页
				    layer.open({
				        type: 2,
				        //skin: 'layui-layer-lan',
				        title: '回复',
				        content: '${path}/rep',	
				        success: function(layero, index){				          				           
				            ut = window[layero.find('iframe')[0].name].ar;   //得到iframe页的窗口对象的ar对象;		         
				        },
				        btn:['确定','取消'],
				        yes: function(index, layero){			    	
				        	var con = ut.getContent();
							if (!con) {
								layer.msg('请输入内容！');
								return;
							}
							$
							.ajax({
								url : "${path}/second/secondReply",
								cache : false,
								type : "post",
								dataType : 'json',
								data : {
									postid : poid,
									replyContent : con,
									replyid : reid
								},
								success : function(da) {
									if (da == 'ok') {
										layer.closeAll('iframe');
										var pagcunnt = $(
												"span[name=paging_current]")
												.text();									
										$
												.teninedialog({
													title : '系统提示',
													content : '回帖成功',
													dialogHidden : function() {

														window.location.href = "${path}/reply/replies/${post.postid}?pageIndex="
																+ (pagcunnt - 1)
																* 10
																+ "&pageSize=10";
													},
												});

									}
									if (da == 'login') {
										if (confirm("请登录!")) {
											window.location.href = "${path}/login";
										}
										;
									}
									if (da == 'no') {
										$.teninedialog({

											title : '系统提示',

											content : '回帖失败！'
										});
									}
								}

							});				        	
				        },cancel: function(index){
				        	ut.setContent("");				           
				        },
				        fix: false,
				        shadeClose: false,
				        maxmin: true,
				        area: ['1000px', '600px'],			      
				        end: function(){
				         
				        }
				    });
				}); 
				}();
		}
	</script>
</body>
</html>
